<template>
  <div class="tab-bar">
    <div :class="['item', { active: tabbarIndex == index }]" v-for="(item, index) of tabbars" :key="index" @click="onClick(item, index)">
      <div :class="`icon iconfont ${item.icon}`"></div>
      <div class="text">{{ item.text }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { tabbarIndex, setTabbarIndex } from '@/router/hooks.js';
import { tabbars } from '@/router/index.js';

const route = useRoute();
const router = useRouter();

const props = defineProps({})

//  自定义事件
const emit = defineEmits([ 'change' ]);

//  点击切换
const onClick = (item, index) => {
  setTabbarIndex(index);
  //  页面跳转
  router.push({ path: item.path });
  emit('change', index);
}
</script>

<style lang="scss" scoped>
.tab-bar {
  display: flex;
  height: 5rem;
  font-size: 1.6rem;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-left: .1rem solid red;
    color: #aaa;

    .icon {
      font-size: 1.6rem;
    }

    .text {
      font-size: 1.4rem;
    }

    &.active {
      color: #1989fa;
    }

    &:nth-child(1) {
      border: none;
    }
  }
}
</style>